<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
		<link rel="stylesheet" href="../../static/plugins/layui/css/layui.css" />
		<link rel="stylesheet" href="../../static/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../static/plugins/jqgrid/ui.jqgrid-bootstrap.css">
		<link rel="stylesheet" href="../../static/plugins/ztree/css/metroStyle/metroStyle.css">
		<link rel="stylesheet" href="../../static/css/main.css">
		<script src="../../static/libs/jquery.min.js"></script>
		<script src="../../static/plugins/layer/layer.js"></script>
		<script src="../../static/plugins/layui/layui.js" charset="utf-8"></script>
		<script src="../../static/libs/bootstrap.min.js"></script>
		<script src="../../static/libs/vue.min.js"></script>
		<script src="../../static/plugins/jqgrid/grid.locale-cn.js"></script>
		<script src="../../static/plugins/jqgrid/jquery.jqGrid.min.js"></script>
		<script src="../../static/plugins/ztree/jquery.ztree.all.min.js"></script>
		<script src="../../static/js/common.js"></script>
		<style>
			.row {
				border-top: 0px;
			}
		</style>
	</head>

	<body>
		<div id="rrapp" v-cloak>
			<div class="row layui-tab layui-tab-card">
				<!--总数统计-->
				<div class="panel-heading">
					<h3 style="margin-left: 10px;">总数统计</h3>
				</div>
				<div class="panel-body" style="text-align: center;">
					<div class="col-md-3">
						<div class="form-group">
							<h1 style="color: orange;">{{taskAll.lessFive}}</h1>
							<label for="">办结时间不足5天</label>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<h1 style="color: red;">{{taskAll.overTime}}</h1>
							<label for="">已超期件数</label>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<h1 style="color: blue;">{{taskAll.waitingAll}}</h1>
							<label for="">待办总数</label>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<h1 style="color: green;">{{taskAll.completeAll}}</h1>
							<label for="">已办总数</label>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 layui-tab layui-tab-card">
					<!--本月指标-->
					<div class="panel-heading">
						<h3>本月指标</h3>
					</div>
					<div class="panel-body" style="text-align: center;height: 230px;">
						<div class="col-md-4">
							<div class="form-group">
								<h1 style="color: orange;">{{taskByMonth.increaseNums}}</h1>
								<label for="">新增数</label>
							</div>
						</div>
						<div class="col-md-4">
							<div class="form-group">
								<h1 style="color: red;">{{taskByMonth.answeredNums}}</h1>
								<label for="">已办理数</label>
							</div>
						</div>
						<div class="col-md-4">
							<div class="form-group">
								<h1 style="color: blue;">{{taskByMonth.dealingNums}}</h1>
								<label for="">正在办理数</label>
							</div>
						</div>
					</div>

				</div>
				<div class="col-md-6 layui-tab layui-tab-card" >
					<!--群众满意度-->
					<div class="panel-heading">
						<h3>群众满意度</h3>
					</div>
					<div class="panel-body">
						<div id="echart_satisfaction" style="height: 200px;"></div>

					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4 layui-tab layui-tab-card">
					<!--人口流动-->
					<div class="panel-heading">
						<h3>人口流动</h3>
					</div>
					<div class="panel-body">
						<div id="echart_population" style="height: 200px;"></div>

					</div>
				</div>
				<div class="col-md-4 layui-tab layui-tab-card" >
					<!--贫困情况-->
					<div class="panel-heading">
						<h3>贫困情况</h3>
					</div>
					<div class="panel-body">
						<div id="echart_poverty" style="height: 200px;"></div>

					</div>
				</div>
				<div class="col-md-4 layui-tab layui-tab-card">
					<!--年龄状态-->
					<div class="panel-heading">
						<h3>年龄状态</h3>
					</div>
					<div class="panel-body">
						<div id="echart_age" style="height: 200px;"></div>

					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4 layui-tab layui-tab-card" >
					<!--学历-->
					<div class="panel-heading">
						<h3>学历</h3>
					</div>
					<div class="panel-body">
						<div id="echart_education" style="height: 200px;"></div>

					</div>
				</div>
				<div class="col-md-4 layui-tab layui-tab-card">
					<!--婚姻状态-->
					<div class="panel-heading">
						<h3>婚姻状态</h3>
					</div>
					<div class="panel-body">
						<div id="echart_marry" style="height: 200px;"></div>

					</div>
				</div>
				<div class="col-md-4 layui-tab layui-tab-card" >
					<!--男女比例-->
					<div class="panel-heading">
						<h3>男女比例</h3>
					</div>
					<div class="panel-body">
						<div id="echart_sex" style="height: 200px;"></div>

					</div>
				</div>
			</div>
		</div>

		<script src="../static/js/main.js"></script>
		<script src="../static/plugins/echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/**
			 * 总数统计
			 */
			vm.taskAllMethod();
			/**
			 * 本月指标
			 */
			vm.taskByMonthMethod();

			/**
			 * 群众满意度
			 */
			vm.satisfactionMethod();

			/**
			 * 人口流动
			 */
			vm.populationMethod();
			/**
			 * 贫困情况
			 */

			vm.povertyMethod();

			function poverty(series_data_one, series_data_two) {
				var option = {
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					series: [{
							name: '人口',
							type: 'pie',
							selectedMode: 'single',
							radius: [0, '30%'],
							label: {
								normal: {
									position: 'inner'
								}
							},
							labelLine: {
								normal: {
									show: false
								}
							},
							data: series_data_one
						},
						{
							name: '家庭',
							type: 'pie',
							radius: ['40%', '55%'],
							data: series_data_two
						}
					]
				};

				var div_echart_poverty = document.getElementById('echart_poverty');
				// 基于准备好的dom，初始化echarts实例
				var myChart_echart_poverty = echarts.init(div_echart_poverty);
				// 使用刚指定的配置项和数据显示图表。
				myChart_echart_poverty.setOption(option);
			}
			/**
			 * 年龄状态
			 */
			vm.ageMethod();
			/**
			 * 学历
			 */
			vm.educationMethod();

			function education(xAxis_data, series_data) {
				var option = {
					color: ['#BE111B'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '1px',
						bottom: '20px',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: xAxis_data, //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '人数',
						type: 'bar',
						barWidth: '50%',
						data: series_data //[10, 52, 200, 334, 1000, 330, 220]
					}]
				};

				var div_echart_education = document.getElementById('echart_education');
				// 基于准备好的dom，初始化echarts实例
				var myChart_echart_education = echarts.init(div_echart_education);
				// 使用刚指定的配置项和数据显示图表。
				myChart_echart_education.setOption(option);
			}

			/**
			 * 婚姻状态
			 */
			vm.marryMethod();
			/**
			 * 男女比例
			 */
			vm.sexMethod();

			//填充参数
			function fullOption(Data) {
				var options = {
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					series: [{
						name: '人数',
						type: 'pie',
						radius: '55%',
						data: Data,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				return options;
			}

			//echart绑定div
			function myChart(id, Date) {
				var div_echart = document.getElementById(id);
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(div_echart);
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(fullOption(Date));
			}
		</script>
	</body>

</html>